import React from 'react';
import { Checkbox, Button, Input } from 'antd'; // 引入 Ant Design 组件
import { Link } from 'react-router-dom';
import './index.css';

const { Password } = Input;

const Register = () => {
  const handleSubmit = () => {
    console.log('注册提交');
  };

  return (
    <div className="register-page">
      {/* 顶部图标+标题区 */}
      <div className="register-header">
        <div className="avatar-wrapper">
          <span className="avatar-icon">👤</span>
        </div>
        <h2 className="register-title">用户注册</h2>
        <p className="register-desc">填写信息，快速创建您的账号</p>
      </div>

      {/* 输入框区域（使用 Ant Design Input，移除 prefixIcon） */}
      <div className="register-form-section">
        <div className="register-form-item">
          <Input 
            placeholder="请输入用户名" 
            className="register-form-input"
          />
        </div>

        <div className="register-form-item">
          <Input 
            placeholder="请输入手机号" 
            className="register-form-input"
            type="tel"
          />
        </div>

        <div className="register-form-item">
          <Password 
            placeholder="请设置密码" 
            className="register-form-input"
          />
        </div>
      </div>

      {/* 协议勾选区 */}
      <div className="agreement-section">
        <Checkbox className="agreement-checkbox">
          我已阅读并同意
          <Link to="/terms" className="agreement-link" target="_blank">《用户服务协议》</Link>
          和
          <Link to="/privacy" className="agreement-link" target="_blank">《隐私政策》</Link>
        </Checkbox>
      </div>

      {/* 注册按钮 */}
      <Button 
        type="primary" 
        onClick={handleSubmit} 
        className="register-btn"
        block
      >
        完成注册
      </Button>

      {/* 已有账号提示 */}
      <div className="login-hint">
        已有账号？<Link to="/login" className="login-link">立即登录</Link>
      </div>
    </div>
  );
};

export default Register;